<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>你点我啊</button>
    <!-- button点击时，会有闪一下的特效，属于异步的渲染，和js主线程是互斥的 -->
    <!-- <script>

        function outer(ot) {
            function inner(it) {
                debugger;
                console.log(it);
            }
            inner(10);
            console.log(ot);
        }
        outer(20);    // js执行栈，压入栈，执行，弹出，然后在压入栈，而这个函数先把outer(20)压入栈，执行的过程中又把inner(10);压入栈，后进去的先出来。
      
    </script> -->

    <script>

        var startTime = + new Date();

        function sleep(time) {
            for(var i = 0; i < time; i ++) {
                console.log(i);
            }
        }

        setTimeout(function(){
            console.log(+ new Date() - startTime);
        }, 100); // 100毫秒后把回调函数放入执行队列，等到sleep执行完之后，才会执行排队的回调函数，即放入主线程执行

        sleep(10000);
    </script>

</body>
</html>